<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
    <link rel="stylesheet" href="./node_modules/animate.css/animate.min.css">
    <style>
        .v-enter,.v-leave-to{
        opacity: 0;
        transform: translateY(80px);
    }
    .v-enter-active,.v-leave-active{
        transition: all 0.4s ease;
    }
    .v-move{
        transition: all 0.6s ease;
    }
    .v-leave-active{
        position: absolute;
    }
    </style>
</head>

<body>
    <div id="app">

        <input type="text" v-model="id">
        <input type="text" v-model="name">
        <input type="button" value="toggle" @click="add" />

        <transition-group appear tag="ul">
            <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
                {{item.id}}---{{item.name}}
            </li>

        </transition-group>

    </div>

    <template id="temp3">
<div>
    <h1>this is use template dom created component out side of app dom</h1>
</div>
    </template>

    <script>
        var com1=Vue.extend({
            template:"<h3>这是使用vue.extend created component</h3>"
        })
        Vue.component("myCom1",com1);

        Vue.component("myCom2",{
            template:"<h3>this is use vue.component created component</h3>"
        })

        Vue.component("myCom3",{
            template:"#temp3"
        })

        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {
                
            }
        })
    </script>
</body>

</html>